<template>
    <div>

    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import store from './js/store'

const components = reactive({
    data: [],
    add(e) {
        this.data = [e, ...this.data]
    },
    pop() {
        if (!this.data.length) {
            return undefined
        }
        let t = JSON.parse(JSON.stringify(this.data[0]))
        this.data = this.data.slice(1)
    }
})

onMounted(async () => {
    store.onChange('add', () => {
        let data = store.getItem('add')
        store.removeItem('add')
        components.add(data)
    })
    store.onChange('remove', () => {
        let data = store.getItem('remove')
        store.removeItem('remove')
        components.add(data)
    })
})

</script>

<style scoped></style>